(function ($, Drupal, window, document, undefined) {

  $(document).ready(function() {

        uploadButton = $('<button/>')
            .addClass('btn btn-primary')
            .prop('disabled', true)
            .text('Processing...')
            .on('click', function () {
                var $this = $(this),
                    data = $this.data();
                $this
                    .off('click')
                    .text('Abort')
                    .on('click', function () {
                        $this.remove();
                        data.abort();
                    });
                data.submit().always(function () {
                    $this.remove();
                });
            });

    var url = Drupal.settings.basePath; 
    $('#photo-file-upload').fileupload({
        url: url,
        dataType: 'json',
        autoUpload: true,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        maxFileSize: 3000000
    }).on('fileuploadadd', function (e, data) {
      $('#in-progress-modal').modal('show');
      $('#progress').show();
    }).on('fileuploadprocessalways', function (e, data) {
    }).on('fileuploadprogressall', function (e, data) {
    }).on('fileuploaddone', function (e, data) {
      $('#in-progress-modal').modal('hide');
      $('#progress').hide();
      update_photo_list(data.result.url, data.result.fid);
      if(data.result.num >=10) {
        $(".fileinput-button").remove();
      }
    }).on('fileuploadfail', function (e, data) {
      $('#in-progress-modal').modal('hide');
      $('#progress').hide();
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');

    $(".photo-link").click(function() {
      location.href=$(this).attr("src");  
    });

  });

  function update_photo_list(url, fid) {
    var index = $(".media-photo-list ul li").length;
    var html = '<li class="ui-state-default">';
          html += '<div class="thumbnail">';
            html += '<img src="'+url+'" style="min-width:290px; min-height:163px"/>';
            html += '<div class="hover-state">';
              html += '<div class="hover-bottom">';
              html += '<a href="/experiences/media/26/delete/'+index+'" rel="nofollow">'+delete_btn_label+'</a>';
              html += '</div>';
            html += '</div>';
          html += '</div>';
        html += '</li>';
    $(".media-photo-list ul").append(html);
  }

})(jQuery, Drupal, this, this.document);
